<template>
  <el-container style="overflow: hidden;">
    <el-header class='approveHeader'>
      <div class='approveHeaderBox'>
        <span class='approveHeaderBoxTitle'>请假单：{{taskParams.taskTitle}}（{{taskParams.processId}})</span><span class='approveHeaderBoxWord'>
          发起人：{{taskParams.submitUserName}}</span><span class='approveHeaderBoxWord'>发起时间：{{taskParams.startDate}}</span>
        <el-button type="text" style="float: right;" @click="goBack"><i class="el-icon-close approveHeaderBoxIcon"></i></el-button>
      </div>
    </el-header>
    <el-container style="overflow: hidden;">
      <el-main class="el-box approveMainBox">
        <el-tabs v-model="activeName" class="el-tabs-bg el-flex el-tabs-flex  approveTabs">
          <el-tab-pane label="业务详情" name="taskPane">
            <el-form label-width="100px" :model="taskDatas" style="padding:0 30px;">
              <el-form-item label="请假单编码">
                <el-col :span="24">
                  <span>{{taskDatas.applyCode}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="状态">
                <el-col :span="24">
                  <span>{{taskDatas.approveStatusDesc}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="部门">
                <el-col :span="24">
                  <span>{{taskDatas.applyDept}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="请假事由">
                <el-col :span="24">
                  <span>{{taskDatas.applyDesc}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="起始日期">
                <span>{{taskDatas.startDate}}</span> -
                <span>{{taskDatas.endDate}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="请假天数">
                <el-col :span="24">
                  <span>{{taskDatas.days}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="申请日期">
                <el-col :span="24">
                  <span>{{taskDatas.applyDate}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="创建人">
                <el-col :span="24">
                  <span>{{taskDatas.createdBy}}</span>
                </el-col>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane class="el-flex" label="流程监控" name="monitorPane">
            <processMonitorChart :childInstanceId="this.taskParams.instanceId"></processMonitorChart>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-aside class="el-box-column" style='padding: 10px 0 0 0;width: 30%;min-width: 368px;'>
        <el-card class="el-flex el-card-flex" style="border-radius: 4px;">
          <div slot="header" class="clearfix">
            <span class='appoveCard' style="color: #1890FF;font-size:16px">审批记录</span>
          </div>
          <div class="block" style="overflow: auto;">
            <approvalHistory :approveListData="approveListData"></approvalHistory>
          </div>
        </el-card>
      </el-aside>
    </el-container>
  </el-container>
</template>

<script>
  import {
    MessageBox,
    Message,
    Tabs,
    TabPane,
    Table,
    TableColumn,
    Timeline,
    TimelineItem
  } from 'element-ui';
  import processMonitorChart from '@/views/workflow/processMonitorChart/processMonitorChart';
  import approvalHistory from '@/views/workflow/approvalHistory/approvalHistory';
  import {
    workflowdDemoSelectByInsId,
    workflowApprovalHistory
  } from '@/api/affairs/leave/leaveApprove.js'
  export default {
    name: '',
    components: { //注册插件
      'el-tabs': Tabs, //选项卡
      'el-tab-pane': TabPane, //选项卡
      'el-table': Table, //表格
      'el-table-column': TableColumn, //表格列
      'el-timeline-item': TimelineItem, //时间轴
      'el-timeline': Timeline,
        processMonitorChart, //工作流程图组件
       approvalHistory //工作流时间轴//时间轴
    },
    data() {
      return {
        activeName: "taskPane", //默认激活的选项卡
        taskParams: {}, //接受的流程参数
        taskDatas: {}, //接受的业务参数
        approveListData: [] //审批记录初始化数据源
      };
    },
    created() {
      this.taskParams = this.$route.params;
      if (!this.taskParams.instanceId) {
        this.goBack();
      }
      this.selectByInsId(); //获取业务详情
      this.approveData(); //获取审批记录
    },
    methods: {
      selectByInsId() { //审批记录数据
        // this.axios.get(`/demo/selectByInsId/${this.taskParams.instanceId}`)
        workflowdDemoSelectByInsId(this.taskParams.instanceId).then(res => {
          if (res.data.code != 10000) return;
          this.taskDatas = res.data.data;
        })
      },
      approveData() { //审批记录数据
        // this.axios.get(`/workFlow/getApprovalHistory?instanceId=${this.taskParams.instanceId}`)
        let data = {
          'instanceId': this.taskParams.instanceId,
          'page': 0,
          'pageSize': 0
        }
        workflowApprovalHistory(data).then(res => {
          if (res.data.code != 10000) return;
          this.approveListData = res.data.data.records
        })
      },
      goBack() {
        this.$router.go(-1)
      }
    }
  };
</script>
<style lang="scss">
  .dynamic {
    .el-textarea__inner {
      margin: 16px 0;
      padding: 16px !important;
      color: #666666;

    }
  }

  .approveHeader {
    height: 24px !important;
    margin-top: 14px;
    margin-bottom: 6px;
    padding: 0 16px;

    .approveHeaderBox {
      line-height: 24px;

      .approveHeaderBoxTitle {
        font-size: 18px;
      }

      .approveHeaderBoxWord {
        margin-left: 20px;
        font-size: 18px !important;
      }

      .approveHeaderBoxIcon {
        font-size: 18px;
        margin-top: -6px;
        color: #666666
      }
    }
  }

  .approveMainBox {
    padding: 10px 10px 0 0 !important;

    .approveTabs {
      border-radius: 4px;
    }
  }

  .approveSecondcard {
    margin-top: 10px;
    border-radius: 4px;
    padding: 0;

  }
</style>
